<template>
    <div class="not-found-container">
        <!-- 3D背景画布 -->
        <canvas ref="canvas" class="bg-canvas"></canvas>

        <!-- 主要内容 -->
        <div class="content">
            <div class="error-code">
                <span>4</span>
                <div class="planet"></div>
                <span>4</span>
            </div>
            <h1 class="title">页面不存在</h1>
            <p class="description">您访问的页面已经迷失在宇宙中...</p>
            <el-button type="primary" size="large" round @click="router.back()" class="home-button">
                <el-icon><Back /></el-icon>
                <span>返回</span>
            </el-button>
        </div>

        <!-- 漂浮的星星 -->
        <div class="stars" v-for="i in 500" :key="i" :style="starStyle(i)"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { router } from "@/router";
import { Back } from "@element-plus/icons-vue";
import * as THREE from "three";

const canvas = ref<HTMLCanvasElement | null>(null);

// 3D场景变量
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;
let planet: THREE.Mesh;
let animationId: number;

// 星星样式
const starStyle = (_index: number) => {
    const size = Math.random() * 3;
    return {
        width: `${size}px`,
        height: `${size}px`,
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        animationDelay: `${Math.random() * 5}s`,
    };
};

// 初始化3D场景
const init3DScene = () => {
    if (!canvas.value) return;

    // 创建场景
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x7d26cd);

    // 创建相机
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 30;

    // 创建渲染器
    renderer = new THREE.WebGLRenderer({ canvas: canvas.value, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 创建星球
    const geometry = new THREE.SphereGeometry(5, 32, 32);
    const material = new THREE.MeshPhongMaterial({
        color: 0x3498db,
        specular: 0x111111,
        shininess: 30,
        wireframe: false,
    });
    planet = new THREE.Mesh(geometry, material);
    scene.add(planet);

    // 添加光源
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    // 动画循环
    const animate = () => {
        animationId = requestAnimationFrame(animate);

        planet.rotation.x += 0.005;
        planet.rotation.y += 0.01;

        renderer.render(scene, camera);
    };

    animate();
};

// 处理窗口大小变化
const handleResize = () => {
    if (!camera || !renderer) return;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
};

// 生命周期钩子
onMounted(() => {
    init3DScene();
    window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
    window.removeEventListener("resize", handleResize);
    cancelAnimationFrame(animationId);
});
</script>

<style scoped lang="less">
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap");

.not-found-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #001a33, #003366);
    color: white;
    font-family: "Orbitron", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    .bg-canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .content {
        position: relative;
        z-index: 1;
        max-width: 800px;
        padding: 2rem;
        text-shadow: 0 0 10px rgba(52, 152, 219, 0.7);

        .error-code {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #3498db;

            span {
                display: inline-block;
                animation: float 3s ease-in-out infinite alternate;
            }

            span:first-child {
                animation-delay: 0.3s;
            }

            span:last-child {
                animation-delay: 0.6s;
            }

            .planet {
                width: 100px;
                height: 100px;
                margin: 0 20px;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, #3498db, #1a5276);
                box-shadow: 0 0 50px #3498db;
                animation: pulse 4s ease-in-out infinite;
            }
        }

        .title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #3498db;
            animation: fadeIn 2s ease-in-out;
        }

        .description {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.8;
            animation: fadeIn 2.5s ease-in-out;
        }

        .home-button {
            background-color: #3498db;
            border: none;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);

            &:hover {
                transform: translateY(-3px);
                box-shadow: 0 0 25px rgba(52, 152, 219, 0.8);
            }

            &:active {
                transform: translateY(1px);
            }
        }
    }

    .stars {
        position: absolute;
        background-color: white;
        border-radius: 50%;
        animation: twinkle 5s infinite ease-in-out;
        z-index: 0;

        @keyframes twinkle {
            0%,
            100% {
                opacity: 0.2;
            }
            50% {
                opacity: 1;
            }
        }
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
